<script setup lang="ts">
import { reactive, ref, ShallowRef, shallowRef } from 'vue'
import Basic from '@/components/information/child/basic.vue'
import '@/styles/information.css'
import { ElTabs, ElTabPane, ElButton, ElScrollbar, ElMessage } from 'element-plus'
import vehicle from '@/components/information/child/vehicle.vue'
import driver from '@/components/information/child/driver.vue'
import { useDriverSubmitApi } from '@/api/biz/driver'
import { getTheDetailsApi, useCarSubmitApi, useCarSubmitProApi } from '@/api/biz/car'

const props = defineProps({
  imei: {
    type: String,
    required: true
  }
})
const emits = defineEmits(['Close', 'getDataList'])

type ModuleNames = 'basic' | 'vehicle' | 'driver'
// @ts-ignore
type ComponentList = { [name: ModuleNames]: { module: ShallowRef<Component>; sources: string } }
const activeName = ref<ModuleNames>('vehicle')
const currentName = shallowRef(Basic)
const driverRef = ref()
const vehicleRef = ref()
const basicRef = ref()
const show = ref(false)
const dataSource = reactive({
  device: {},
  car: {},
  driver: {}
})
const componentList = reactive<ComponentList>({
  basic: {
    module: shallowRef(Basic),
    sources: 'device'
  },
  vehicle: {
    module: shallowRef(vehicle),
    sources: 'car'
  },
  driver: {
    module: shallowRef(driver),
    sources: 'driver'
  }
})

const init = () => {
  if (props.imei !== undefined) {
    revise(props.imei)
    return
  } else {
    show.value = true
  }
}
init()
function revise(imei) {
  getTheDetailsApi(imei).then((res) => {
    show.value = true
    const { device, car, driver } = res.data
    device.companyId = parseInt(device.companyId)
    dataSource.device = device ? device : {}
    dataSource.car = car ? car : {}
    dataSource.driver = driver ? driver : {}
  })
}
/**
 * 切换页面
 */
function tabChange(name: ModuleNames) {
  currentName.value = componentList[name].module
}
const submitHandle = () => {
  vehicleRef.value.submitHandleCar().then((res) => {
    if (!res) {
      activeName.value = 'vehicle'
      return
    }
    basicRef.value.submitHandleBasic().then((res) => {
      dataSource.device.companyId = dataSource.car.sysOrgId
      if (!res) {
        activeName.value = 'basic'
        return
      }
      driverRef.value.submitHandleDriver().then((res) => {
        dataSource.driver.sysOrgId = dataSource.car.sysOrgId
        if (!res) {
          activeName.value = 'driver'
          return
        }
        submit()
      })
    })
  })
}

function updateValue({ k, v }) {
  console.log(k, v)
  dataSource[k] = v
}

function submit() {
  useCarSubmitProApi(dataSource).then(() => {
    ElMessage.success({
      message: '操作成功',
      duration: 500,
      onClose: () => {
        emits('Close')
        emits('getDataList')
      }
    })
  })
}

defineExpose({
  init
})
</script>

<template>
  <div class="information">
    <ElTabs v-if="show" v-model="activeName" class="demo-tabs">
      <ElTabPane label="车辆信息" name="vehicle">
        <el-scrollbar height="600px">
          <vehicle ref="vehicleRef" v-model="dataSource.car" ></vehicle>
        </el-scrollbar>
      </ElTabPane>
      <ElTabPane label="司机信息" name="driver">
        <el-scrollbar height="600px">
          <driver ref="driverRef" v-model="dataSource.driver"></driver>
        </el-scrollbar>
      </ElTabPane>
      <ElTabPane label="设备信息" name="basic">
        <el-scrollbar height="600px">
          <basic ref="basicRef" v-model="dataSource.device"></basic>
        </el-scrollbar>
      </ElTabPane>
    </ElTabs>
    <!--    <ElScrollbar height="400px">-->
    <!--      <ElForm ref="ruleFormRef" :model="dataSource" :rules="rules" label-width="120">-->
    <!--        <component :is="currentName" :data="currentData"></component>-->
    <!--      </ElForm>-->
    <!--    </ElScrollbar>-->
    <div class="center">
      <el-button @click="emits('Close')">取消</el-button>
      <el-button type="primary" @click="submitHandle()">确定</el-button>
    </div>
  </div>
</template>
<style>
.center{
  text-align: center;
}
</style>
